<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta content="featon inc." name="author">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/vendor/skin/ftskin.css" rel="stylesheet">
    <title>中蜂产业智慧管理平台</title>
</head>
<body>

<nav class="navbar ft-navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <!-- <img alt="Brand" src="..."> -->中蜂产业智慧管理平台
            </a>
        </div>
        <div class="collapse navbar-collapse" id="">
            <ul class="nav navbar-nav" id="app-menu">
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li style="font-size: 20px;">
                    <a href="/" target="_blank">
                        <i class="fa glyphicon glyphicon-cloud"
                           style="vertical-align: middle;font-size: 26px;font-family: 'Glyphicons Halflings';font-weight: bold;"></i>
                        智慧蜂产业数据大平台
                    </a>
                </li>
                <li class="dropdown">
                    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"
                       href="#"
                       role="button"><i class="fa fa-user-o fa-fw"></i> <span id="userName">管理员</span> <span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:openUpdateUser();"><i class="fa fa-user-o fa-fw"></i> 个人信息</a></li>
                        <li><a data-target="#exampleModal" data-toggle="modal" data-whatever="@mdo" href="javascript:0"><i
                                class="fa fa-gear fa-fw"></i> 修改密码</a></li>
                        <li class="divider" role="separator"></li>
                        <li><a href="/logout"><i class="fa fa-sign-out fa-fw"></i> 注销/退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>


    </div>
</nav>

<!-- 主导航结束	-->
<div class="glyphicon glyphicon-menu-left" id="SwitchSidebar" title="收缩左栏"></div>
<!-- 左导航开始	-->
<div class="ft-sidebar-box" id="ftsidebar" style="">
    <iframe class="sideFrame" frameborder="0" id="sideFrame" name="sideFrame" src=""
            style="background: url('/static/images/loading.gif') center no-repeat; height:100%; width: 100%; margin: 0; padding: 0;"></iframe>
</div>
<!-- 左导航结束	-->


<!--页头  当前位置  顶部工具条  --开始-->
<div class="ft-local-box clearfix" id="ft-local-box">
    <div class="col-sm-6" style="padding-left: 22px;">
        <i class="fa fa-home" style="color: #337ab7;"></i> <span class="ft-local-title" id="ft-local"></span>
    </div>
    <div class="col-sm-6">
        <div class="text-right ft-local-title-right">
            <i class="fa fa-calendar" style="color: #A3A3A3;"></i> <span id="curDate"></span>
        </div>
    </div>
</div>
<!--页头  当前位置  顶部工具条  --结束-->
<!-- 主窗口开始	-->
<div class="ft-mainFrame" id="ftmainFrame" style="background-color: #eff5ef;overflow: hidden">
    <iframe class="mainFrame" frameborder="0" id="mainFrame" name="mainFrame" src=""
            style="background: url('/static/images/loading.gif') center no-repeat; height: 100%;width: 100%; "></iframe>
    <iframe class="mainFrame" frameborder="0" height="100%" id="bigPageFrame" name="bigPageFrame" src=""
            style="background: url('/static/images/loading.gif') center no-repeat; height:100%;display:none"
            width="100%"></iframe>
    <div class="announcement">

    </div>

</div>
<!-- 主窗口结束	-->
<!-- 版权开始	-->
<div class="ft-copyright" id="ftcopyright">
    Copyright © 2021 YiXun All Rights Reserved.
</div>
<!-- 主版权结束	-->
<div aria-labelledby="gridSystemModalLabel" class="modal fade" id="modal" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="width: 674px">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> <span
                    style="float: right">发布时间: <span id="release_time"></span> </span>
            </div>
            <div class="modal-body" style="font-size: 16px ">
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div aria-labelledby="exampleModalLabel" class="modal fade" id="exampleModal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">修改密码</h4>
            </div>
            <div class="modal-body">
                <form action="javascript:">
                    <div class="form-group oldPassword" style="padding: 10px">
                        <label class="control-label" for="oldPassword"><span style="color: red">*</span>原密码</label>
                        <input class="form-control" id="oldPassword" name="oldPassword" onfocus="clear_errorMsg()"
                               required type="password">
                        <span class="errorMsg" style="color: red;font-size: 14px">  </span><br>
                    </div>
                    <div class="form-group newPassword"
                         style="padding: 10px;border: 1px solid black;border-radius: 6px">
                        <label class="control-label" for="newPassword"><span style="color: red">*</span>新密码</label>
                        <input class="form-control" id="newPassword" name="newPassword" oninput="checkPassword(this)"
                               required type="password">
                        <span class="errorMsg" style="color: red;font-size: 14px">  </span><br>
                        <label class="control-label" for="reNewPassword"><span style="color: red">*</span>确认新密码</label>
                        <input class="form-control" id="reNewPassword" name="reNewPassword"
                               oninput="checkPassword(this)"
                               required type="password">
                        <span class="errorMsg" style="color: red;font-size: 14px">  </span> <br>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                        <button class="btn btn-primary" data-loading-text="Loading..." data-toggle="tooltip" id="submit"
                                type="submit">更改
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<div aria-labelledby="mySmallModalLabel" class="modal fade" data-backdrop="false" id="information" role="dialog"
     tabindex="-1">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content"
             style="padding: 13px;background-color: rgba(221,238,215,.5);font-size: 16px;color: brown;">
            <span class="glyphicon glyphicon-ok"></span> <span id="infoMessage">密码修改成功!</span>
        </div>
    </div>
</div>
<div id="message"></div>
<script src="/static/vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/layer/layer.js"></script>
<script src="/static/vendor/moment/moment-with-locales.min.js"></script>
<script src="/static/vendor/skin/js/ft-ui.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<script src="/static/vendor/skin/js/index-util.js"></script>
<script src="/static/vendor/skin/js/lang-zh-cn.js"></script>
<script src="/static/vendor/skin/js/index-menu.js"></script>
<script src="/static/vendor/skin/js/ajax-util.js"></script>

<script>
    var ajax = new Ajax();
    let LoginUserBean;
    moment.locale('zh-cn');
    let int = self.setInterval("clock()", 100);

    function clock() {//moment().format('MMMM Do YYYY, h:mm:ss a')
        $("#curDate").html(moment().format('YYYY年MM月DD日 h:mm:ss a  dddd'));
    }

    function getLoginUserBean(obj) {
        LoginUserBean = obj;
        $("#userName").text(LoginUserBean.data.user_realname);
    }

    jQuery(function ($) {
        ajax.simple('/user/getCurrentUser', {}, getLoginUserBean);
        $('#mainFrame').attr('src', '/operate/list').show();
        initMenuAfter();
        initMenu();
        //$('#mainFrame').attr('src','/sys/ywimg_add.html').show();
        //$('#mainFrame').attr('src','/sys/cs/org/dept').show();
        //$('#mainFrame').attr('src','/sys/cs/org/user').show();
        //$('#mainFrame').attr('src','/sys/cs/org/operate').show();
        //$('#mainFrame').attr('src','/sys/cs/org/menu').show();
        //$('#mainFrame').attr('src','/sys/cs/org/role').show();
        //$('#mainFrame').attr('src','desktop.jsp').show();
        $('#SwitchSidebar').bind('click', function () {
            //alert($(this).attr("title"));
            switch ($(this).attr("title")) {
                case "收缩左栏":
                    $(this).removeClass("glyphicon-menu-left");
                    $(this).addClass("glyphicon-menu-right");
                    $(this).attr("title", "展开左栏");
                    $("#ftsidebar").hide();
                    $("#ft-local-box").css("left", 0);
                    $("#ftmainFrame").css("left", 0);
                    $('#SwitchSidebar').css("left", 0);
                    break;
                case "展开左栏":
                    $(this).removeClass("glyphicon-menu-right");
                    $(this).addClass("glyphicon-menu-left");
                    $(this).attr("title", "收缩左栏");
                    $("#ftsidebar").show();
                    $("#ft-local-box").css("left", 220);
                    $("#ftmainFrame").css("left", 220);
                    $('#SwitchSidebar').css("left", 221);
                    break;
                default:
            }
        });
    });

    function jumpURL(url, iframeID) {
        $("#" + iframeID).attr("src", url);
        //top.$("#mainFrame").hide();
    }

    function Zhankaileftmenu() {
        $(this).removeClass("glyphicon-menu-right");
        $(this).addClass("glyphicon-menu-left");
        $(this).attr("title", "收缩左栏");
        $("#ftsidebar").show();
        $("#ft-local-box").css("left", 220);
        $("#ftmainFrame").css("left", 220);
        $('#SwitchSidebar').css("left", 221);

    }

    function openUpdateUser() {
        modelWindow.openFrameWindow = function (title, path, width, height) {
            top.layer.open({
                type: 2,
                title: title,
                maxmin: false,
                shadeClose: true, //点击遮罩关闭层
                area: [width + 'px', height + 'px'],
                content: path
            });
        };
        modelWindow.openFrameWindow("个人信息", "/lbx/user/userInfo", 600, 700);
    }

    let info = '';
    let i = 0;
    $.get("/li/getShowList", function (res) {
        info = res;
        for (let re of info) {
            $(".announcement").append(`
        <div class="alert alert-info alert-dismissible pra" role="alert" style="font-size: 12px;height: 32px;line-height: 0;display: none">
            <span type="button" class="close" data-dismiss="alert" aria-label="Close" style="top: -12px">
            <span aria-hidden="true">&times;</span>
            </span>
          <i class="glyphicon glyphicon-volume-down laba" style="line-height: inherit;"></i>:
          <a class="infoTitle" href="javascript:0;" onclick="showDetails()">
            <span>` + re.title + `</span>
            <span class="label label-info" style="font-size: 12px;line-height: 0;margin: 0;padding: 0">New</span>
          </a>
          <br>
        </div>
         `).children().first().show();
        }

        let dom = $(".pra").first();
        setInterval(function () {
            $(dom).hide();
            i++;
            if (i > 2) {
                dom = $(".pra").first();
                i = 0;
            } else {
                dom = $(dom).next();
            }
            $(dom).show();
        }, 5000)
        let flag = true;
        setInterval(function () {
            if (flag) {
                $(".laba").attr("class", "glyphicon glyphicon-volume-up laba")
            } else {
                $(".laba").attr("class", "glyphicon glyphicon-volume-down laba");
            }
            flag = !flag;
        }, 400)
    })

    /*政策法规详情弹窗*/
    function showDetails() {
        $("#gridSystemModalLabel").html(info[i].title)
        if (i === 0) {
            $("#gridSystemModalLabel").html(info[i].title + `<span class="label label-info" style="font-size: 12px;line-height: 0;margin: 0;padding: 0">New</span>`)
        }
        $(".modal-body").html(info[i].content)
        $("#release_time").text(info[i].releasedDtime)
        $('#modal').modal('show')
    }
    function infoMessageShowDetails() {
        i = 0;
        showDetails()
    }

    /*修改密码 提交按钮*/
    $("#submit").click(function () {
        let that = $("#reNewPassword")
        if (checkPassword(that)) {
            $.post("/lbx/user/changePassword",
                {
                    "oldPassword": $("#oldPassword").val(),
                    "newPassword": $("#newPassword").val()
                },
                function (res) {
                    if (res === "1") {
                        $(".modal-body form input").val('')
                        $('#exampleModal').modal('hide')
                        $("#infoMessage").text("密码修改成功");
                        $("#information").modal('show')
                        let interval = setInterval(function () {
                            $("#information").modal('hide')
                            clearInterval(interval)
                        }, 1500);
                    } else if (res === "-1") {
                        alert("服务器异常")
                    } else if (res === "0") {
                        $(".oldPassword .errorMsg").text("原密码不正确")
                    } else {
                        alert("未知异常")
                    }
                })
        }
    })

    /*检测密码*/
    function checkPassword(that) {
        let val = $(that).val();
        if (val.trim() !== "") {
            let val1 = $(that).siblings("input").val();
            if (val === val1) {
                $(".newPassword .errorMsg").text("")
                return true;
            } else {
                $(".newPassword .errorMsg").text("两次密码不一致")
                return false;
            }
        } else {
            $(".newPassword .errorMsg").text("新密码必须不少于6个字符")
        }

    }

    /*重置错误信息*/
    function clear_errorMsg() {
        $(".oldPassword .errorMsg").text("")
    }

    $('#exampleModal').on('shown.bs.modal', function (e) {
        $("#oldPassword").focus()
    })

</script>
<script type="text/javascript">
    let websocket = null;
    //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://1.82.133.117:8083/websocket");
    } else {
        alert('Not support websocket')
    }
    //连接发生错误的回调方法
    websocket.onerror = function() {
    };
    //接收到消息的回调方法
    websocket.onmessage = function(event) {
        $(".announcement").empty();
        $.get("/li/getShowList", function (res) {
            info = res;
            for (let re of info) {
                $(".announcement").append(`
        <div class="alert alert-info alert-dismissible pra" role="alert" style="font-size: 12px;height: 32px;line-height: 0;display: none">
            <span type="button" class="close" data-dismiss="alert" aria-label="Close" style="top: -12px">
            <span aria-hidden="true">&times;</span>
            </span>
          <i class="glyphicon glyphicon-volume-down laba" style="line-height: inherit;"></i>:
          <a class="infoTitle" href="javascript:0;" onclick="showDetails()">
            <span>` + re.title + `</span>
            <span class="label label-info" style="font-size: 12px;line-height: 0;margin: 0;padding: 0">New</span>
          </a>
          <br>
        </div>
         `).children().first().show();
            }
        });
        $("#infoMessage").html(`您有新消息《 <a href="javascript:0;" onclick='infoMessageShowDetails()'>`+event.data+`</a> 》`);
        $("#information").modal('show')

       document.addEventListener("mousedown",informationShow)
    }
    function informationShow() {
        $("#information").modal('hide')
    }
    $('#information').on('hidden.bs.modal', function (e) {
        document.removeEventListener('mousedown',informationShow)
    })
    window.onbeforeunload = function() {
        websocket.close();
    }
    //发送消息
    function send() {
        let message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>